<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,mininum-scale=1.0,maxinum-scale=1.0,user-scalable">
    <title>Document</title>
    <link rel="stylesheet" href="css/cat-eye-shopping.css">
    <link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
    <!-- 头部 -->
    <div class="cat-eye-shopping-head">
        <img src="https://p0.meituan.net/travelcube/cbf57087cbd62c1a284617c12406060756361.png.webp" alt="">
    </div>
    <!-- 商品 -->
    <div class="cat-eye-shopping-goods">
        <ul>
            <li><img src="https://p0.meituan.net/travelcube/9c53f9247f58fde952b06b4406ba4d8545588.png.webp" alt=""></li>
            <li><img src="https://p0.meituan.net/travelcube/8fd5a756f1f53f2cbd98cd0e4c963c8a45358.png.webp" alt=""></li>
        </ul>
        <ul>
            <li><img src="https://p0.meituan.net/travelcube/bb0c8dc84a7bc8973f3875614592a04d38898.png.webp" alt=""></li>
            <li><img src="https://p0.meituan.net/travelcube/cceaa184421bdf57602a38c4e48811e333596.png.webp" alt=""></li>
        </ul>
        <ul>
            <li><img src="https://p1.meituan.net/travelcube/4616e26e203507a70cc35d8aa5133f7554438.png.webp" alt=""></li>
            <li><img src="https://p1.meituan.net/travelcube/e9d8ab6bd381d6883891beab39c9cb7d61023.png.webp" alt=""></li>
        </ul>
        <ul>
            <li><img src="https://p0.meituan.net/travelcube/9c53f9247f58fde952b06b4406ba4d8545588.png.webp" alt=""></li>
            <li><img src="https://p0.meituan.net/travelcube/8fd5a756f1f53f2cbd98cd0e4c963c8a45358.png.webp" alt=""></li>
        </ul>
        <ul>
            <li><img src="https://p0.meituan.net/travelcube/bb0c8dc84a7bc8973f3875614592a04d38898.png.webp" alt=""></li>
            <li><img src="https://p0.meituan.net/travelcube/cceaa184421bdf57602a38c4e48811e333596.png.webp" alt=""></li>
        </ul>
        <ul>
            <li><img src="https://p1.meituan.net/travelcube/4616e26e203507a70cc35d8aa5133f7554438.png.webp" alt=""></li>
            <li><img src="https://p1.meituan.net/travelcube/e9d8ab6bd381d6883891beab39c9cb7d61023.png.webp" alt=""></li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="cat-eye-shopping-last">
        <img src="https://p0.meituan.net/travelcube/a8c89ff055d72ec8a0bf6f3945a5caaf26159.png.webp" alt="">
    </div>
</body>
<script src="js/mui.min.js"></script>
<script>
    (function () {
        function w() {
            var all = document.documentElement;
            var test = all.getBoundingClientRect().width;
            console.log(123, test)
            if (test > 750) {
                test = 750;
            }
            rem = test / 18.75;
            // rem = test / 37.5;
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();
</script>
</html>